import React from 'react'

// import Index from './views/01-getting-tarted/Index'
// import ClassComponent from './views/02-components/ClassComponent'
// import Jsx from './views/03-jsx/Index'
// import Style from './views/04-style/Index'
// import PropsAndState from './views/05-props-state/Index'
// import StatesChares from './views/06-states-shares/Index'
// import Controlled from './views/07-controlled/Index'
// import UnControlled from './views/07-controlled/Index2'
// import RenderData from './views/08-render-data/Index'
// import Events from './views/09-events/Index'
// import Form from './views/10-form/Index'
// import FormFile from './views/10-form/Index2'
// import FeedBack from './views/11-todolist/Feedback'
// import Lifetimes from './views/12-lifetimes/Index'
// import Context from './views/13-context/Index'
// import Hoc from './views/14-hoc/Index'
// import Portal from './views/15-portal/Index'
// import Counter from './views/16-redux/Counter'
// import CounterComp from './views/16-redux/CounterComp'
// import Products from './views/16-redux/Products'
// import Cart from './views/16-redux/cart/Index'
// import SuspenseComp from './views/17-suspense/Index'
// import Hooks from './views/18-hooks/Index'
// import UseState from './views/18-hooks/useState-useEffect/Index'
// import ColorShow from './views/18-hooks/03-useContext/ColorShow'
// import Index from './views/18-hooks/04-useReducer/Index'
// import Index from './views/18-hooks/05-useCallback/Index'
// import Index from './views/18-hooks/06-useMemo/Index'
// import ClassComputed from './views/18-hooks/06-useMemo/ClassComputed'
// import RefComponent from './views/18-hooks/07-useRef/RefComponent'
// import CV1 from './views/18-hooks/07-useRef/CaptureValue1'
// import CV2 from './views/18-hooks/07-useRef/CaptureValue2'
// import Index from './views/18-hooks/08-useImperativeHandle/Index'
// import Index from './views/18-hooks/09-useLayoutEffect/Index'
// import Index from './views/19-router/v2/Index'
// import Index from './views/19-router/v3/Index'
// import Index from './views/19-router/Index'
// import RouteConfig from './views/19-router/examples/RouteConfig'
// import Auth from './views/19-router/examples/Auth'
// import Index from './views/19-router/examples/auth/Index'
// import Transition from './views/20-transition/Transition'
import Test from './views/21-test/Test'

class App extends React.Component {
  render() {
    return (
      // 自定义组件：React 组件, ParscalCase
      // van-button: kebab-case
      // VanButton: ParscalCase
      // vanButton: camelCase
      // <ClassComponent></ClassComponent>
      // <Jsx></Jsx>
      // <Style></Style>
      // <PropsAndState></PropsAndState>
      // <StatesChares></StatesChares>
      // <UnControlled></UnControlled>
      // <RenderData></RenderData>
      // <Events></Events>
      // <Form></Form>
      // <FormFile></FormFile>
      // <FeedBack></FeedBack>
      // <Lifetimes></Lifetimes>
      // <Context></Context>
      // <Hoc></Hoc>
      // <Portal></Portal>

      // <Counter></Counter>
      // <CounterComp></CounterComp>
      // <Products></Products>
      // <Cart></Cart>
      // <SuspenseComp></SuspenseComp>
      // <Hooks></Hooks>
      // <UseState></UseState>
      // <ColorShow></ColorShow>
      // <Index></Index>
      // <ClassComputed></ClassComputed>
      // <RefComponent></RefComponent>
      // <CV1></CV1>
      // <CV2></CV2>
      // <Index></Index>
      // <RouteConfig></RouteConfig>
      // <Auth></Auth>
      // <Index></Index>
      // <Transition></Transition>
      <Test></Test>
    )
  }
}

export default App